<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="content">
    <p class="msg2">1</p>
    <div class='box'>
        <p class="msg1">2</p>
    </div>
    <p class="msg3">3</p>
</div>
<script>
    /*
        有各种类型  1-12
         Node.ELEMENT_NODE(1)
         Node.ATTRIBUTE_NODE(2)
         Node.TEXT_NODE(3)
         Node.CDATA_SECTION_NODE(4)
         Node.ENTITY_REFERENCE_NODE(5)
         Node.ENTITY_NODE(6)
         Node.PROCESSING_INSTRUCTION_NODE(7)  Node.COMMENT_NODE(8)
         Node.DOCUMENT_NODE(9)
         Node.DOCUMENT_TYPE_NODE(10)
         Node.DOCUMENT_FRAGMENT_NODE(11)
         Node.NOTATION_NODE(12)
     */
    console.log([Node])

    /*
        2. 节点关系
     */
    const pNode = document.querySelector('.msg1')
    console.log([pNode])

    /*
        3.查找节点
     */
    const theNode = document.querySelector('.box')
    // 父级节点

    console.log('theNode.parentNode', [theNode.parentNode])
    // 儿子节点
    console.log('theNode.children', [theNode.children])
    // 第一个孩子
    console.log('theNode.firstElementChild', [theNode.firstElementChild])
    // 最后一个孩子
    console.log('theNode.lastElementChild', [theNode.lastElementChild])

    //下一个兄弟节点
    console.log('theNode.nextElementSibling',[theNode.nextElementSibling])
    // 上一个兄弟节点
    console.log('theNode.previousElementSibling',[theNode.previousElementSibling])

    
    /*
        4.操纵节点
            appendChild(newNode)
            insertBefore(newNode,beforeNode)
            replaceNode(newNode,beReplacedNode)
            
            removeChild(theNode)
            
            cloneNode()  传入true拷贝全部(默认) false只拷贝外部
            
     */
    // 4.1 appendChild(newNode)
    const newNode = document.createElement('p')
    newNode.innerText = '你好啊'
    theNode.appendChild(newNode)
    
    // 4.2 appendChild如果把原有的结点加到某个地方,会直接移动原来的结点
    theNode.appendChild(theNode.previousElementSibling)
    
    // 4.3 insertBefore()
    
    
    /*
        5.normalize()
     */
    
    
</script>
</body>
</html>